
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<section class=article-list th:with="posts = ${posts.items}">
  <article class=has-image th:each="post : ${posts}">
    <header class=article-header>
      <div class=article-image th:if="${theme.config.basic.enableRandomImg and (! #strings.isEmpty(theme.config.basic.postRandomImg) or ! #strings.isEmpty(post.spec.cover)) or (!theme.config.basic.enableRandomImg and ! #strings.isEmpty(post.spec.cover))}">
        <a th:href="@{${post.status.permalink}}">
          <th:block th:if="${theme.config.basic.lazyLoading}">
          <img th:data-src="${#strings.isEmpty(post.spec.cover) ? (theme.config.basic.enableRandomImg ? theme.config.basic.postRandomImg+'?pageid='+post.metadata.name : '') : post.spec.cover}"
               th:src="${theme.config.basic.lazyUrl}"
               width=800 height=450 loading=lazy th:alt="${post.spec.title}"
          class="lazyLoading">
          </th:block>
          <th:block th:if="not ${theme.config.basic.lazyLoading}">
            <img th:src="${#strings.isEmpty(post.spec.cover) ? (theme.config.basic.enableRandomImg ? theme.config.basic.postRandomImg+'?pageid='+post.metadata.name : '') : post.spec.cover}"
                 width=800 height=450 loading=lazy th:alt="${post.spec.title}">
          </th:block>
        </a>
      </div>
      <div class=article-details>
        <th:block th:if="${not #lists.isEmpty(post.categories)}">
          <header
                  class="article-category"
                  th:with="category = ${post.categories[0]}"
          >
            <a
                    th:href="@{${category.status.permalink}}"
                    th:text="${category.spec.displayName}"
            >
            </a>
          </header>
        </th:block>
        <div class=article-title-wrapper>
          <h2 class=article-title>
            <a th:href="@{${post.status.permalink}}" th:text="${post.spec.title}">
            </a>
          </h2>
          <h3 class="article-subtitle" th:if="${! #strings.isEmpty(post.status.excerpt)}"
              th:text="${post.status.excerpt}">
          </h3>
        </div>
        <footer class=article-time>
          <div>
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-calendar-time"
                 width="56" height="56" viewBox="0 0 24 24" stroke-width="2" stroke="currentcolor"
                 fill="none" stroke-linecap="round" stroke-linejoin="round">
              <path stroke="none" d="M0 0h24v24H0z" />
              <path d="M11.795 21H5a2 2 0 01-2-2V7a2 2 0 012-2h12a2 2 0 012 2v4" />
              <circle cx="18" cy="18" r="4" />
              <path d="M15 3v4" />
              <path d="M7 3v4" />
              <path d="M3 11h16" />
              <path d="M18 16.496V18l1 1" />
            </svg>
            <time class=article-time--published th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}">

            </time>
          </div>
          <div>
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clock"
                 width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentcolor"
                 fill="none" stroke-linecap="round" stroke-linejoin="round">
              <path stroke="none" d="M0 0h24v24H0z" />
              <circle cx="12" cy="12" r="9" />
              <polyline points="12 7 12 12 15 15" />
            </svg>
            <th:block th:with="content = ${postFinder.content(post.metadata.name)}">
            <time class=article-time--reading id="article-time--reading" th:with="wordCount = ${#strings.length(content.content)}">
              <th:block th:if="${wordCount / 400 lt 1}">
                阅读时长: 1 分钟
              </th:block>
              <th:block th:if="${wordCount / 400 ge 1}">
                阅读时长: [[${wordCount / 400}]] 分钟
              </th:block>
            </time>
            </th:block>
          </div>
        </footer>
      </div>
    </header>

  </article>
</section>
